<script>


export default {
  name: "TableExamplePage",
  data(){
    return {
      total : 678,
      tableData: [
        {
          name :"校长",
          age :13,
          sex :"男",
          data :"2024-5-8",
          address :"江苏省南京市南京信息工程大学"
        },
        {
          name :"校长",
          age :13,
          sex :"男",
          data :"2024-5-8",
          address :"江苏省南京市南京信息工程大学"
        },
        {
          name :"校长",
          age :13,
          sex :"男",
          data :"2024-5-8",
          address :"江苏省南京市南京信息工程大学"
        },
        {
          name :"校长",
          age :13,
          sex :"男",
          data :"2024-5-8",
          address :"江苏省南京市南京信息工程大学"
        }
      ]
    }


  },
  methods: {
    handleCurrentChange(current) {
      alert("您想要跳转的页码为：" + current)
    },
    handleSizeChange(size) {
      alert("您想修改的页码大小为：" + size)
    }
  }
}
</script>

<template>
  <div>
    <el-table :data = "tableData" stripe border>
      <el-table-column label="名字"  width="200">
        <template v-slot= "scope">
          <el-tag>{{scope.row.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age" width="200"></el-table-column>
      <el-table-column label="性别" prop="sex" width="200"></el-table-column>
      <el-table-column label="日期" prop="data" width="200"></el-table-column>
      <el-table-column label="地址" prop="address" width="200"></el-table-column>
      <el-table-column label="操作功能">
        <template >
          <el-table-column >
            <el-button type="primary" size = "mini" plain icon = "el-icon-edit">编辑</el-button>
            <el-button type="danger" size = "mini" plain icon = “el-icon-delete”>删除</el-button>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total = "total"
                   style="margin-top: 20px"
                     @current-change ="handleCurrentChange"
                     @size-change = "handleSizeChange"
                     layout="sizes,prev,pager,next,jumper,total"/>
  </div>
</template>

<style scoped>

</style>